<template>
    <div class="app">
        <ul>
            <li v-for="option in Options" :key="option">{{ option }}</li>
        </ul>
    </div>
</template>
  
<script>
export default {
    // 用户下方选项组件
    name: "myUserOp",
    data() {
        return {
            Options: [
                "收货地址管理", "联系客服", "意见反馈", "关于我们", "把网站推荐给其他人"
            ]
        }
    }
}
</script>
  
<style scoped>
.app {
    width: 98%;
    margin: 0 auto;
    /* border: 1px solid red; */
    margin-top: 5px;
}

.app ul {
    margin: 0;
    padding: 0;
}

.app li {
    height: 40px;
    line-height: 40px;
    list-style: none;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    margin-bottom: 1px;
    padding-left: 8px;
}
.app li:first-child {
    margin-bottom: 10px; /* "收货地址管理"下方有10px的外边距 */
    cursor: pointer; /* 可以单独跳转其他页面 */
    background-image: url(../../assets/user/跳转.png);
background-repeat: no-repeat;
background-position: 97% center ; /* 或者调整为你想要的位置 */
background-size:18px;
}
.app li:nth-child(2),
.app li:nth-child(3),
.app li:nth-child(4) {
    border-bottom: 1px solid #ccc; /* "联系客服", "意见反馈", "关于我们"有下边框 */
    cursor: pointer; /* 可以单独跳转其他页面 */
    background-image: url(../../assets/user/跳转.png);
background-repeat: no-repeat;
background-position: 97% center ; /* 或者调整为你想要的位置 */
background-size:18px;
}
.app li:last-child {
    margin-top: 10px; /* "把网站推荐给其他人"上边距有10px */
    cursor: pointer; /* 可以单独跳转其他页面 */
    background-image: url(../../assets/user/跳转.png);
background-repeat: no-repeat;
background-position: 97% center ; /* 或者调整为你想要的位置 */
background-size:18px;

}

</style>